<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>预约美容院</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/style.css{$JSDEBUG}"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css{$JSDEBUG}"/>
    <style>
    	.btylistmain h2 {
    		overflow: hidden;
   		}
		.selected{background:#eee !important;}
	</style>
    <script type="text/javascript">
    function ArrayToURL(array) {
		var pairs = [];
		for (var key in array)
		if (array.hasOwnProperty(key))
			pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(array[key]));
		
		return pairs.join('&');
	}
	</script>
</head>
<body style="background:#f7f7f9;">
	<include file="Public/customHeader" title="预约美容院" url="javascript: history.go(-1);"/>
    <header class="beautylist_head">
      <div class="btylisthead">
       <i><img src="__FONT__/images/loction.png" ></i><!--img 加上后旋转-->
       <a href="{:U('/Index/customAddress/type/beauty')}"><h1><span></span></h1></a>
      </div>
    </header>
 	<section class="beautylist_sec">
       <div>
         <ul></ul>
       </div>
	</section>
	<div class="load">
       <div class="load_main">
          <img src="__FONT__/images/loading.gif">
          <p>正在加载...</p>
       </div>
    </div>
    
    <script src="__FONT__/js/zepto.min.js"></script>
    <script type="text/javascript" src="__FONT__/js/zepto.cookie.js"></script>
	<script type="text/javascript" src="__FONT__/js/mustache.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <include file="Public/share-js" />
    <script>
    var selected = '{$beauty_id}';
    function closeLoading() {
  		$('.load').hide();
  	}
  	function openLoading() {
  		$('.load').show();
  	}
    var beautyTemp = '<li data-id="{{id}}" class="{{#selected}}selected{{/selected}}">'
        	+'<div class="btylistmain addradius">'
        	+'<h2>{{#hasProfile}}<img src="__UPLOADS__/Beauty/Banner/{{banner}}">{{/hasProfile}}{{^hasProfile}}<img src="__FONT__/images/beautycare_08.jpg">{{/hasProfile}}</h2>'
        	+'<dd>'
        	+'<h3><span>{{name}}</span><label class="unradio {{#selected}}radio{{/selected}}"></label></h3>'
        	+'<h3>{{{startHtml}}}<label>{{service_total}}人消费</label></h3>'
        	+'<h3 class="hacklocation"><span>{{address}}</span>{{#showDistance}}<label>{{distance}}</label>{{/showDistance}}</h3>'
        	+'</dd>'
        	+'</div>'
        	+'</li>';
        	
		function getLocation() {
			if (navigator.geolocation) {
	       		navigator.geolocation.getCurrentPosition(showPosition);
			} else {
				alert("Geolocation is not supported by this browser.");
			}
		}
	
		function showPosition(position) {
			var gc = new BMap.Geocoder();
	    	$.ajax({
	    		url: '{:U("/Index/gpsChange")}',
	    		data: {
	    			lngAndLat :position.coords.longitude +',' +position.coords.latitude
	    		},
	    		dataType: 'json',
	    		success: function (result) {
	    			localStorage.setItem('location', result.data.y +',' +result.data.x);
		        	var point = new BMap.Point(result.data.x, result.data.y); //初始化地图中心点
		        	gc.getLocation(point, function(rs){
		        		showLocationInfo(point, rs);
		        	});
	    		}
	    	});
		}
		
		//显示地址信息窗口
	    function showLocationInfo(pt, rs){
	        var addComp = rs.addressComponents;
	        if (typeof startGetLocation == 'undefined') {
		        $(".btylisthead").find('span').text(addComp.district + addComp.street + addComp.streetNumber);
	        }
//	         var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br />";
//	         addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
	        //alert(addr);
	        
	        $(".btylisthead").find('i img').removeClass('load_rotate');
	        
	        var selectProvince = localStorage.getItem('select_province'),
		    	selectCity = localStorage.getItem('select_city'),
		    	ajaxLoadParams = {},
		    	currentProvince = addComp.province,
		    	currentCity = addComp.city;
		    
		    if ($.trim(selectProvince) != '' && $.trim(selectCity) != '' && 
				(currentProvince != selectProvince || currentCity != selectCity)) {
		        	ajaxLoadParams ['province'] = selectProvince;
		        	ajaxLoadParams ['city'] = selectCity;
		        	
		        	$('.beautylist_head').find('span').text('定位于所选城市不符合，请手动输入');
		        } else {
		        	ajaxLoadParams ['lat'] = pt.lat;
		        	ajaxLoadParams ['lng'] = pt.lng;
		        	ajaxLoadParams ['province'] = addComp.province;
		        	ajaxLoadParams ['city'] = addComp.city;
		        	
		        	var currentTime = new Date().getTime();
					var $expires = currentTime + 7 * 24 * 3600 * 1000;
		        	$.cookie('lat', pt.lat, $expires);
					$.cookie('lng', pt.lng, $expires);
		        }
		        
	            loadBeauticain(ajaxLoadParams);
	        }
	        
	      	function loadBeauticain(requestParams) {
	      		$.ajax({
	      			url: '{:U("/BeautyParlor/ajaxLoadBeauty")}',
	      			data: requestParams,
	      			dataType: 'json',
	      			success: function (result) {
	      				if (result.status == 1) {
	      					var data = result.data;
	      					
	      					var selectCity = localStorage.getItem('select_city');
      						var reg = new RegExp('\\s*'+selectCity);
							
	      					if (!$.isEmptyObject(data)) {
	      						var html = '';
	          					for (var i in data) {
	          						var beauty = data [i], startHtml = '';
	          						
	          						var start = parseInt(beauty.start);
	          						for (var j = 0 ; j < 5; j++) {
	          							if (start > j) {
	          								startHtml += '<i></i>';
	          							}
	          						}
	          						beauty.startHtml = startHtml;
	    							if (typeof beauty.banner != '0') {
	    								beauty.hasProfile = true;
	    							} else {
	    	      						beauty.hasProfile = false;
	    							}
	    							
	    							beauty.address = beauty.address.replace(reg,'');
	    							beauty.selected = beauty.id == selected;
	    							
	    							beauty.showDistance = typeof beauty.distance != 'undefined';
	          						html += Mustache.render(beautyTemp, beauty);
	          					}
	          					
	          					var htmlObj = $(html);
	          					$('.beautylist_sec ul').empty().append(htmlObj);
	          					
	          					$(htmlObj).find(".hacklocation label").each(function() {
	          		   			  var hWidth = $(".hacklocation").width();
	          		   			  var lWidth = $(this).width()+14;
	          		   			  var sWidth = hWidth-lWidth;
	          		   			  $(this).siblings().css('width',sWidth); 
	          		             });
	          					
	          					htmlObj.each(function (i, o) {
	          						$(o).click(function () {
	          							var beauty_id = $(this).attr('data-id');
	              			    		$(".btylistmain dd h3 .unradio").removeClass('radio');
	              			    		
	              						$(this).find('.unradio').addClass('radio');
	              						$(this).css('background','#eee');
	              						$(this).siblings().css('background','#fff');
	              						
	              						localStorage.setItem('beauty_id', beauty_id);
	              						var parms = {beauty_id:beauty_id};
	              						
	              						redirectUrl = '{:U("/ServiceItem/detail/id/".$serviceId)}' + '?' + ArrayToURL(parms);
	              						setTimeout(function () {
	              							window.location.href = redirectUrl;
	              						}, 1000);
	          						})
	          					});
	      					} else {
	      						html = '<div class="no_bank"><h1>美滴滴</h1><p>没有可选美容院~</p></div>';
	      						$('.beautylist_sec ul').empty().append(html);
	      					}
	      				}
	      				
	      				closeLoading();
	      			},
	      			error: function (e, t, s) {
	      				closeLoading();
	      			}
	      		});
	      	}
		
      	$(function () {
      		
        	$(".btylisthead").find('i').click(function () {
        		$(this).find('img').addClass('load_rotate');
				getLocationByWeixin();
        	});
        });
    </script>
    <if condition="$address">
    <script>
    	startGetLocation = false;
		var gc = new BMap.Geocoder();
       	
    	localStorage.setItem('location', '{$latitude},{$longitude}');
        var point = new BMap.Point('{$longitude}', '{$latitude}'); //初始化地图中心点
        gc.getLocation(point, function(rs){
            showLocationInfo(point, rs);
        });
    </script>
    </if>
</body>
</html>